<style lang="scss" scoped>
.selection-outline {
  padding:5px 10px;
  display: block;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #dcdee2;
  font-size: 14px;
  position: relative;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.selection-title {
  padding: 3px 10px;
  font-size: 16px;
  font-weight: bolder;
}
</style>
<template>
  <div class="selection-outline">
    <cfgForm :cols="cols" :rules="rules" :columns="formColumns" ref="_frm" :data="filter"></cfgForm>
    <div style="text-align:right;margin-bottom: 10px;">
        <Button type="primary" @click="handleSearch">{{lang.search}}</Button>
        <Button class="ivu-ml-8" @click="handleReset">{{lang.reset}}</Button>
    </div>
    <Table border
        :columns="[finalSelectColumn,...columns,moreColumn]"
        :data="data"
        @on-row-dblclick="selectRow"
        @on-select-cancel="handleSelectCancel"
        @on-select-all="handleSelectAll"
        @on-select-all-cancel="handleSelectAllCancel"
        @on-select="handleSelect">
      <!-- 单选 -->
      <template slot-scope="{ row,index }" slot="check">
        <Checkbox :value="row._checked" @on-change="change($event,row,index)"></Checkbox>
      </template>
      <template v-for="item in finalColumns" slot-scope="{ row,index }" :slot="item.slot">
        <span>{{row[item.slot]}}</span>
      </template>
      <template slot-scope="{ row,index }" slot="expand"></template>
    </Table>
    <Page ref="page"
          style="float: right;margin: 16px 10px 4px 0;line-height: 2;"
          :total="pageNavigation.total"
          :page-size-opts="pageSizeOpts"
          :current.sync="pageNavigation.pageNumber"
          show-total
          show-sizer
          show-elevator
          :page-size="pageNavigation.pageSize"
          @on-change="handleChangePage"
          @on-page-size-change="handleChangePageSize"
    />
  </div>
</template>

<script>
    import usableStatus from '@/pages/config/usableStatus'
    export default {
        name: 'selectModalContentApi',
        data () {
            return {
                filter: {},
                rules: {},
                // 单选
                checkColumn: {
                    title: '',
                    slot: 'check',
                    width: 40
                },
                // 多选
                selectColumn: {
                    type: 'selection',
                    width: 40
                },
                selection: [],
                finalColumns: [],
                currentRow: null,
                currentIndex: -1,
                records: []
            }
        },
        props: {
            isSingleCheck: {
                default: () => {
                    return false;
                }
            },
            formColumns: {
                default: () => {
                    return [];
                }
            },
            columns: {
                default: () => {
                    return [];
                }
            },
            moreColumn: {
                default: () => {
                    // return {
                    //     type: 'expand',
                    //     slot: 'expand',
                    //     width: 40,
                    //     render: (h, params) => {
                    //         return h('div', [
                    //             h('div', `${this.lang['comments']}:`),
                    //             h('div', params.row.comments),
                    //             h('div', `${this.lang['createTime']}:${params.row.createTime}`),
                    //             h('div', `${this.lang['updateTime']}:${params.row.updateTime}`)
                    //         ])
                    //     }
                    // }
                    return {};
                }
            },
            cols: {
                default: () => {
                    return 2;
                }
            },
            selectionData: {
                default: () => {
                    return [];
                }
            },
            pageSizeOpts: {
                default: () => {
                    return [10, 30, 50, 100];
                }
            },
            pageNavigation: {
                default: () => {
                    return { total: 0, pageSize: 10, pageNumber: 1 };
                }
            },
            filtered: {
                default: () => {
                    return {};
                }
            }
        },
        computed: {
            lang () {
                return {
                    'en-US': {
                        title: 'selection',
                        search: 'search',
                        reset: 'reset',
                        add: 'Add',
                        edit: 'edit',
                        delete: 'delete',
                        comments: 'comments'
                    },
                    'zh-CN': {
                        title: '选择',
                        search: '查询',
                        reset: '重置',
                        add: '添加',
                        edit: '编辑',
                        delete: '删除',
                        comments: '注释'
                    }
                }[this.G_Locale]
            },
            finalSelectColumn () {
                if (this.isSingleCheck) {
                    return this.checkColumn;
                } else {
                    return this.selectColumn;
                }
            },
            data () {
                let selection = this.selection.map(d => d.personId)
                let data = this.records.map(d => {
                    if (selection.includes(d.account)) {
                        return {
                            ...d,
                            _checked: true
                        }
                    } else {
                        return {
                            ...d,
                            _checked: false
                        }
                    }
                })
                // data = data.filter(d => d.useStateCode === '1') || []
                return data;
            }
        },
        watch: {
            '$i18n.locale': function () {
                this.$refs.page.$forceUpdate();
                this.$refs.page.$children[0].$forceUpdate();
            }
        },
        beforeMount () {
            this.queryPage(this.pageNavigation, this.filtered)
            this.selection = this.tools.lodash.cloneDeep(this.selectionData);
        },
        methods: {
            queryPage (pageNavigation, filter) {
                //删除查询项中属性值为空的查询条件
                this.tools.deleteInvalid(filter)
                let newFilter = '';
                if (this.tools.isReal(filter)) {
                    newFilter = util.getFilter(filter);
                }
                this.$api.AccountUser.queryByPage(pageNavigation.pageNumber, pageNavigation.pageSize, {condition:newFilter}).then(res => {
                    this.records = res.records;
                    this.pageNavigation.total = res.recordCount;
                })
            },
            handleSearch () {
                this.pageNavigation.pageNumber = 1;
                this.queryPage(this.pageNavigation, this.filter)
            },
            handleReset () {
                this.filter = {};
                this.pageNavigation.pageNumber = 1;
                this.queryPage(this.pageNavigation, this.filter)
            },
            selectRow (row, index) {
                this.currentRow = row;
                this.currentIndex = index;
                this.submit();
            },
            // 单选模式
            change (val, row, index) {
                if (val) {
                    this.currentRow = row;
                    this.currentIndex = index;
                    this.selection = [{ personId: row.account, personName: row.userName }]
                } else {
                    this.currentRow = null;
                    this.currentIndex = -1;
                    this.selection = []
                }
                this.submit();
            },
            submit () {
                this.$emit('handleSingCheckChange', this.selection)
            },
            // 多选模式选中某一项时触发
            handleSelect (selection, row) {
                this.selection.push({ personId: row.account, personName: row.userName })
                this.$emit('handleSelectChange', this.selection)
            },
            // 多选模式取消选中某一项时触发
            handleSelectCancel (selection, row) {
                let index = this.selection.findIndex(d => d.personId === row.account)
                if (index !== -1) {
                    this.selection.splice(index, 1)
                }
                this.$emit('handleSelectChange', this.selection)
            },
            handleChangePage (page) {
                this.pageNavigation.pageNumber = page;
                this.queryPage(this.pageNavigation, this.filter)
            },
            // 切换每页条数
            handleChangePageSize (size) {
                this.pageNavigation.pageNumber = 1;
                this.pageNavigation.pageSize = size;
                this.queryPage(this.pageNavigation, this.filter)
            },
            //全选
            handleSelectAll(selection){
                selection.forEach(row=>{
                    let index = this.selection.findIndex(d => d.personId === row.account)
                    if (index === -1) {
                        this.selection.push({ personId: row.account, personName: row.userName })
                    }
                })
                this.$emit('handleSelectChange', this.selection)
            },
            //取消全选
            handleSelectAllCancel(selection){
                this.data.forEach(row=>{
                    let index = this.selection.findIndex(d => d.personId === row.account)
                    if (index !== -1) {
                        this.selection.splice(index, 1)
                    }
                })
                this.$emit('handleSelectChange', this.selection)
            }
        }
    }
</script>
